<template>
  <view>
    <view class="nav-grid-container">
      <navigator :url="`/pages/index/home?templateId=${item.target_.val_}`" open-type="navigate" class="nam-item"
        v-for="item in navData.buttons_" :key="item.seq_">
        <view class="nav-img">
          <image :src="item.img_" mode="aspectFill" />
        </view>
        <text class="nav-name">{{ item.name_ }}</text>
      </navigator>
    </view>
  </view>
</template>

<script setup lang="ts">
import type { floorsState } from '@/types/home';
defineProps<{
  navData: floorsState
}>()
</script>

<style lang="scss" scoped>
.nav-grid-container {
  display: flex;
  background-color: #fff;

  .nam-item {
    flex: 1;
    margin: 6px;
    $wh: 50px;
    text-align: center;

    .nav-img {
      width: $wh;
      height: $wh;
      margin: auto;
      margin-bottom: 6px;
    }

    .nav-name {
      font-size: 14px;
      text-align: center;
    }
  }
}
</style>
